<template>
  <view class="clock-entry">
    <view class="header">
      <view class="back-btn" @click="goBack">
        <text class="back-text">←</text>
      </view>
      <text class="title">桌面时钟</text>
      <view class="placeholder"></view>
    </view>
    
    <view class="current-time">
      <view class="time-display">{{ currentTime }}</view>
      <view class="date-display">{{ currentDate }}</view>
    </view>
    
    <view class="function-grid">
      <view class="function-item" @click="goToClock">
        <view class="function-icon clock-icon">
          <ClockIcon :size="80" />
        </view>
        <text class="function-name">时钟</text>
        <text class="function-desc">查看时间</text>
      </view>
      
      <view class="function-item" @click="goToAlarm">
        <view class="function-icon alarm-icon">
          <text class="icon-text">⏰</text>
        </view>
        <text class="function-name">闹钟</text>
        <text class="function-desc">设置提醒</text>
      </view>
      
      <view class="function-item" @click="goToTimer">
        <view class="function-icon timer-icon">
          <text class="icon-text">⏲️</text>
        </view>
        <text class="function-name">计时器</text>
        <text class="function-desc">倒计时</text>
      </view>
      
      <view class="function-item" @click="goToStopwatch">
        <view class="function-icon stopwatch-icon">
          <text class="icon-text">⏱️</text>
        </view>
        <text class="function-name">秒表</text>
        <text class="function-desc">精确计时</text>
      </view>
      
      <view class="function-item" @click="goToWorldClock">
        <view class="function-icon world-icon">
          <text class="icon-text">🌍</text>
        </view>
        <text class="function-name">世界时钟</text>
        <text class="function-desc">全球时间</text>
      </view>
    </view>
  </view>
</template>

<script>
import ClockIcon from './components/ClockIcon.vue'

export default {
  components: {
    ClockIcon
  },
  
  data() {
    return {
      currentTime: '',
      currentDate: '',
      timer: null
    }
  },
  
  onLoad() {
    this.updateTime()
    this.startTimer()
  },
  
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  
  methods: {
    updateTime() {
      const now = new Date()
      
      // 时间显示
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      this.currentTime = `${hours}:${minutes}`
      
      // 日期显示
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const date = String(now.getDate()).padStart(2, '0')
      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const weekDay = weekDays[now.getDay()]
      
      this.currentDate = `${year}年${month}月${date}日 ${weekDay}`
    },
    
    startTimer() {
      this.timer = setInterval(() => {
        this.updateTime()
      }, 1000)
    },
    
    goBack() {
      uni.navigateBack()
    },
    
    goToClock() {
      uni.navigateTo({
        url: '/desktopClock/pages/clock/clock'
      })
    },
    
    goToAlarm() {
      uni.navigateTo({
        url: '/desktopClock/pages/alarm/alarm'
      })
    },
    
    goToTimer() {
      uni.navigateTo({
        url: '/desktopClock/pages/timer/timer'
      })
    },
    
    goToStopwatch() {
      uni.navigateTo({
        url: '/desktopClock/pages/stopwatch/stopwatch'
      })
    },
    
    goToWorldClock() {
      uni.navigateTo({
        url: '/desktopClock/pages/worldClock/worldClock'
      })
    }
  }
}
</script>

<style scoped>
.clock-entry {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60rpx 30rpx 40rpx;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.back-text {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: bold;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #ffffff;
}

.placeholder {
  width: 60rpx;
}

.current-time {
  text-align: center;
  margin-bottom: 80rpx;
  padding: 0 30rpx;
}

.time-display {
  font-size: 120rpx;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
  margin-bottom: 20rpx;
  font-family: 'Courier New', monospace;
}

.date-display {
  font-size: 32rpx;
  color: #ffffff;
  opacity: 0.9;
}

.function-grid {
  padding: 0 30rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.function-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10rpx);
  border-radius: 25rpx;
  padding: 40rpx 30rpx;
  text-align: center;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.function-item:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.2);
}

.function-icon {
  width: 100rpx;
  height: 100rpx;
  margin: 0 auto 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.icon-text {
  font-size: 48rpx;
}

.function-name {
  display: block;
  font-size: 32rpx;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.function-desc {
  font-size: 24rpx;
  color: #ffffff;
  opacity: 0.7;
}
</style>